<template>
  <div>
    <h1>app</h1>
    <!-- 路由组件内容显示的出口 
    每一次路由组件的切换都是路由组件的销毁与重建
    keep-alive  缓存路由组件

    keep-alive
    1.默认情况下被切换的路由是路由组件的销毁与重建
    2.keep-alive可以缓存路由组件对象，提高用户体验

    注：对数据实时性要求比较高，则不要使用缓存路由组件（keep-alive）,低可以使用，可以提高用户体验

    -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <!-- <router-view></router-view> -->
    <ul class="list">
      <li>
        <!-- router-link的本质 a链接 -->
        <!-- <router-link to="/cate">分类</router-link> -->
        <!-- <router-link :to="{ name: 'home' }">首页</router-link> -->
        <router-link :to="{ path: '/home' }">首页</router-link>
      </li>
      <li>
        <router-link to="/cate">分类</router-link>
      </li>
      <li>
        <router-link to="/search">搜索</router-link>
      </li>
      <li>
        <router-link to="/my">我的</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.list {
  display: flex;
  list-style: none;
  li {
    margin-left: 50px;
    a {
      text-decoration: none;
      font-size: 50px;
    }
    .router-link-active {
      color: pink;
    }
  }
}
</style>